<template>
  <AppLayout>
    <div :class="styles['result-management']">
      <div class="page-header">
        <h1 class="page-title">成绩管理</h1>
        <div class="header-actions">
          <button class="export-btn" @click="exportResults">
            <i class="btn-icon">📊</i>
            <span>导出成绩</span>
          </button>
        </div>
      </div>

      <div class="filters">
        <div class="search-box">
          <input v-model="searchQuery" type="text" placeholder="搜索学生..." class="search-input">
          <i class="search-icon">🔍</i>
        </div>
        <div class="filter-options">
          <select v-model="examFilter" class="filter-select">
            <option value="">所有考试</option>
            <option v-for="exam in exams" :key="exam.id" :value="exam.id">
              {{ exam.name }}
            </option>
          </select>
          <select v-model="scoreFilter" class="filter-select">
            <option value="">所有成绩</option>
            <option value="excellent">优秀 (90-100)</option>
            <option value="good">良好 (80-89)</option>
            <option value="pass">及格 (60-79)</option>
            <option value="fail">不及格 (0-59)</option>
          </select>
        </div>
      </div>

      <div class="results-table">
        <table>
          <thead>
            <tr>
              <th>学生姓名</th>
              <th>考试名称</th>
              <th>得分</th>
              <th>总分</th>
              <th>正确率</th>
              <th>用时</th>
              <th>提交时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="result in filteredResults" :key="result.id">
              <td>{{ result.studentName }}</td>
              <td>{{ result.examName }}</td>
              <td class="score">{{ result.score }}</td>
              <td>{{ result.totalScore }}</td>
              <td>{{ result.accuracy }}%</td>
              <td>{{ result.duration }}分钟</td>
              <td>{{ formatDate(result.submittedAt) }}</td>
              <td>
                <span class="status-badge" :class="getScoreLevel(result.score)">
                  {{ getScoreLevelLabel(result.score) }}
                </span>
              </td>
              <td>
                <div class="action-buttons">
                  <button class="action-btn view" @click="viewDetail(result.id)" title="查看详情">
                    👁️
                  </button>
                  <button class="action-btn edit" @click="editScore(result)" title="修改成绩">
                    ✏️
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/teacher/result-management.module.css'

const results = ref([])
const exams = ref([])
const searchQuery = ref('')
const examFilter = ref('')
const scoreFilter = ref('')

const filteredResults = computed(() => {
  return results.value.filter(result => {
    const matchesSearch = !searchQuery.value ||
      result.studentName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      result.examName.toLowerCase().includes(searchQuery.value.toLowerCase())

    const matchesExam = !examFilter.value || result.examId === examFilter.value
    const matchesScore = !scoreFilter.value || getScoreLevel(result.score) === scoreFilter.value

    return matchesSearch && matchesExam && matchesScore
  })
})

const getScoreLevel = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

const getScoreLevelLabel = (score) => {
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 60) return '及格'
  return '不及格'
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const viewDetail = (resultId) => {
  console.log('查看详情:', resultId)
}

const editScore = (result) => {
  console.log('修改成绩:', result)
}

const exportResults = () => {
  console.log('导出成绩')
}

onMounted(async () => {
  // 模拟数据
  exams.value = [
    { id: 1, name: 'Java基础考试' },
    { id: 2, name: '数据库原理考试' }
  ]

  results.value = [
    {
      id: 1,
      studentName: '张三',
      examName: 'Java基础考试',
      examId: 1,
      score: 85,
      totalScore: 100,
      accuracy: 85,
      duration: 95,
      submittedAt: '2024-01-15 10:30:00'
    },
    {
      id: 2,
      studentName: '李四',
      examName: 'Java基础考试',
      examId: 1,
      score: 92,
      totalScore: 100,
      accuracy: 92,
      duration: 88,
      submittedAt: '2024-01-15 11:15:00'
    }
  ]
})
</script>